React 回憶錄 PartIII

About Flux and Redux

這兩種都是各自不同的Design Pattern

這次要介紹的是Redux

基本上Redux分為幾個大部分

• Action - 行為

• View

  • Container - 每個 Container都是各自獨立的一個頁面

  • Component - 某個頁面切割得較小元件

  • CSS

• Store - (多個Reducer組成)

  • Client 的 Cache

以下會以簡單的會員系統作為範例

此次範例以Facebook Login為例

任務切割

通常我們收到一個功能要切割成一個個TodoList

方便在寫程式的時候有更具體的目標

並且在對程式架構上有較清楚的分配

此篇功能只會介紹任務分配與切割

其餘會在後續篇幅慢慢聊到

登入功能

• 會員登入

  • 會員登入的Button- View

  • 發送Request - Action

    • User 輸入 帳號與密碼

  • 登入成功 - Store

    • 使用者資訊存放

    • 跳轉到首頁

  • 登入失敗顯示錯誤訊息 - Store

    • 顯示錯誤訊息

後端會介接Facebook 的會員系統

大致上功能會發現有幾個動作

一個是發送Request

一個是收到Response會處理Success, Error

那麼在攥寫的時候

若是有重複的程式碼

便可以整理出來寫成一個Function

避免相同的程式碼重複

例如Request與Server溝通這是一定會常常使用到的

那麼就可以將他整理出來一個Function

提供測試與之後使用

但是因為我們是使用react-facebook-login這個套件

這個行為該套件已經幫我們完成了

所以可以等到之後再來介紹

View

以上述功能會需要兩個View

一個是登入頁面

一個是已經登入成功頁面

我們在之前建立的HomeScene可以設定為登入成功後的頁面

所以我們需要另外一個登入頁面

Create LoginScene

既然我們要使用Facebook 登入

那我們到jsCoach那邊搜尋一下

是否有值得信賴的套件可供使用

而我找到了react-facebook-login

目前有 一百多顆星 而且上個月總共有 八萬四千多次 的下載量

看起來很值得信賴

Install

  $ npm install react-facebook-login --save

關於申請Facebook APP ID

containers/LoginScene/index.js

import React, {Component} from 'react';
import FacebookLogin from 'react-facebook-login';

export default class LoginScene extends Component {
  constructor(props) {
    super(props);
    this.getResponse = this
      .getResponse
      .bind(this);
  }

  render() {
    console.log('LoginView');
    return (
      <div>
        <FacebookLogin
          appId="462242820647777"
          autoLoad={true}
          fields="name,email,picture,about"
          callback={this.getResponse}
          cssClass="my-facebook-button-class"
          icon="fa-facebook"/>
      </div>
    );
  }

  getResponse(response) {
    if (response.error) {
      alert('登入失敗')
    } else {
      this
        .props
        .loginSuccess();
    }
  }
}

我們設定好appId之後

指定他收到Response的Function

App.js修改為

import React, {Component} from 'react';
import LoginScene from './containers/LoginScene';
import HomeScene from './containers/HomeScene';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      auth: false
    };
  }

  render() {
    let component = null;
    if (this.state.auth) {
      component = <HomeScene/>;
    } else {
      component = <LoginScene loginSuccess={() => this.setState({auth: true})}/>;
    }
    return (
      <div>{component}</div>
    );
  }
}

export default App;

重新啟動後會看到下列畫面

會看到Console有一個LoginView

代表他有Render出LoginScene

但是因為會自動檢查登入狀態

登入成功後轉到HomeScene

這個動作太快

可能不是那麼容易感覺得到

但是這樣似乎並不是我們想要的

因為如果我們有更多的頁面

屆時頁面管理難度會暴增

所以我們需要一個專門處理頁面之間關係的Route System

下一篇幅會再來介紹React Route System

謝謝